<template>
  <div>
    <div class="addBtn">
      <el-button type="primary" @click="toAdd">添加权限</el-button>
    </div>
    <div style="padding:0 40px;box-sizing: border-box;">
      <el-table
        :data="perList"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        default-expand-all
        row-key="id"
      >
        <el-table-column label="名字" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="ziAdd(scope.row.id)">添加</el-link>
              <el-link type="primary" style="margin:0 10px;" @click="toEdit(scope.row)">编辑</el-link>
              <el-link type="danger" @click="toDel(scope.row.id)">删除</el-link>

            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="perTitle"
      width="50%"
      :visible.sync="perFlag"
    >
      <el-form ref="powerForm" label-width="100px" :model="powerObj" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="powerObj.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="powerObj.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="powerObj.description" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch v-model="powerObj.enVisible" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="sureCtrl"> 确定</el-button>
        <el-button @click="toClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// @在vue 项目中代表src文件夹
import { getPermission, addPermission, delPowerApi, updatePowerApi } from '@/api/power'
import { deepClone } from '@/utils/index'
export default {
  name: 'VueHrimIndex',

  data() {
    return {
      perTitle: '添加权限',
      perList: [], // 权限列表
      perFlag: false, // 弹出层控制
      powerObj: { // v-model的数据
        code: '',
        description: '',
        name: '',
        enVisible: '0', // 0 不开启  1 开启
        pid: 0, // 父级的id
        type: 1 // 1 全局添加权限  2添加子权限

      },
      rules: { // 验证条件
        code: [{ required: true, message: '标识必填', trigger: 'blur' }],
        description: [{ required: true, message: '描述必填', trigger: 'blur' }],
        name: [{ required: true, message: '描述必填', trigger: 'blur' }]
      }
    }
  },
  watch: {
    perFlag(newVal) { // 监听遮罩层的关闭 时候重置所有数据
      if (!newVal) {
        this.powerObj = { // v-model的数据
          code: '',
          description: '',
          name: '',
          enVisible: '0', // 0 不开启  1 开启
          pid: 0, // 父级的id
          type: 1 // 1 全局添加权限  2添加子权限
        }
        this.perTitle = '添加权限'
      }
    }
  },
  created() {
    this.getPer()
  },
  mounted() {

  },

  methods: {
    toEdit(row) {
      // 点击编辑  回显处理
      console.log(row, '000000000000')
      this.perTitle = '编辑权限'
      this.perFlag = true
      this.powerObj = deepClone(row)// 回显
    },
    toClose() {
      this.perFlag = false// 关闭弹出层
    },
    toDel(id) { // 删除权限接口的调用
      this.$confirm('你确定删除这个权限吗', '提示', {

      }).then(async() => {
        const res = await delPowerApi(id)
        console.log(res, '-000000000000')
        this.$message.success('删除成功')
        this.getPer()
      })
    },
    sureCtrl() { // 确定添加  或  确定编辑
      this.$refs.powerForm.validate(async vali => {
        if (vali) {
          if (this.powerObj.id) {
            const editRes = await updatePowerApi(this.powerObj)
            console.log(editRes)
            this.$message.success('编辑权限成功')
          } else {
          // 添加权限接口
            const res = await addPermission(this.powerObj)
            console.log(res, '----------')
            this.$message.success('添加权限成功')
          }

          this.getPer()
          this.perFlag = false
          this.$refs.powerForm.resetFeilds() // 添加或编辑成功 重置表单
        }
      })
    },
    toAdd() { // 打开全局添加弹出层
      this.powerObj.type = 1
      this.powerObj.pid = 0
      this.perFlag = true
    },
    ziAdd(id) { // 打开权限列表的 数据添加 子权限的弹出层
      this.powerObj.type = 2
      this.powerObj.pid = id
      this.perFlag = true
    },
    async getPer() { // 获取权限列表接口
      const res = await getPermission()

      this.perList = this.toTree(res) // 用树形整理数据方法  处理返回的数据
      console.log(this.perList, '66666666666666666')
    },
    toTree(data) { // 树形处理数据插件
      const result = []
      if (!Array.isArray(data)) {
        return result
      }
      data.forEach(item => {
        delete item.children
      })
      const map = {}
      data.forEach(item => {
        map[item.id] = item
      })
      data.forEach(item => {
        const parent = map[item.pid]
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          result.push(item)
        }
      })
      return result
    }
  }

}
</script>
<style lang="scss" scoped>
  .addBtn{
    margin:20px;
  }
</style>
